@import '../../../lessConst.less';

.pageSyntheticCardIpPa {
  width: 100vw;
  // background: url('@{iplandUrl}syntheticCard/gameBj.png') no-repeat;
  // background-size: 100% 100%;
  background: linear-gradient(180deg, #1a0047 0%, #1e0b41 40%, #32145d 100%);
  height: 100vh;

  .gameTimes {
    margin-top: 5px;
    color: #fff;
    font-size: 28px;
  }

  .loadingContent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
  }

  .emptyContent {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;

    .emptyIcon {
      width: 370px;
      height: 240px;
    }

    .emptyExtraTitle {
      color: #fff;
      margin-top: 10px;
      font-size: 24px;
    }
  }

  .pageSyntheticCardIpContent {
    display: flex;
    align-items: center;
    justify-self: center;

    .strategy {
      position: absolute;
      right: 0;
      top: 30px;
      width: 140px;
      height: 54px;
      background-color: #6b3adb;
      border-radius: 40px 0 0 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      .strategyLabel {
        color: #fff;
        font-size: 24px;
      }
    }

    .titleImage {
      width: 530px;
      height: 158px;
      margin-top: 50px;
    }

    .syntheticTitle {
      margin-bottom: 10px;
      display: flex;
      align-content: center;
      justify-content: center;
      text-align: center;

      .titleMessage {
        color: #fff;
        font-size: 28px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        width: 400px;
      }

      .titleExtra {
        color: #fff;
        font-size: 20px;
        margin-top: 20px;
      }
    }

    .collectBtn {
      background: url('@{iplandUrl}syntheticCard/buttonBj.png') no-repeat;
      background-size: 100% 100%;
      width: 248px;
      height: 88px;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-top: 10px;
    }

    .collectBtn::after {
      border: 0;
    }

    .ipList {
      height: 460px;
      .ipContent {
        padding: 0 20px;

        .activeItem {
          border-radius: 40px;
          border: 4px solid #cae0fc;
          background-color: transparent !important;
          opacity: 1 !important;
        }

        .ipRow {
          position: relative;
          height: 230px;

          .activeIcon {
            color: #fff;
            position: absolute;
            right: 20px;
            font-size: 40px;
            top: 40px;
          }

          .at-row {
            flex-direction: row;
            background: url('@{iplandUrl}syntheticCard/ipBj.png') no-repeat;
            background-size: 100% 100%;
            background-color: #000;
            opacity: 0.5;
            align-items: center;
            justify-content: center;
            height: 100%;
            margin: 20px 0;
            border-radius: 40px;

            .left {
              height: 100%;
              border-radius: 10px;

              .ipThum {
                width: 100%;
                height: 100%;
                padding: 10px 20px;
              }
            }

            .right {
              display: flex;

              .ipName {
                color: #fff;
                font-size: 28px;
                width: 90%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
              }
            }
          }
        }
      }
    }

    .operates {
      width: 100%;
      position: absolute;
      bottom: 10px;

      .propItem {
        display: flex;
        align-items: center;
        justify-content: center;
        position: inherit;
        left: 20px;
        top: -150px;

        .operateIcon {
          width: 148px;
          height: 108px;
        }

        .operateLabel {
          color: #fff;
          font-size: 20px;
          margin-left: -50px;
        }
      }

      .extraOperates {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 0 20px;
        padding-bottom: env(safe-area-inset-bottom);
        margin: 10px 0 20px 0;

        .operateItem {
          display: flex;
          align-items: center;

          .operateIcon {
            width: 99px;
            height: 93px;
          }

          .operateLabel {
            color: #fff;
            font-size: 20px;
          }
        }
      }
    }

    .extraTitle {
      font-size: 20px;
      color: #fff;
    }
  }
}
